import { Fragment, defineComponent, reactive } from 'vue';
import { } from './Vmap.module.scss';

/*
---文件
*/

type VoiDetail = {
    title: string;
    voiPoints: any[];//途径点
}

export const vmapObj: {
    isShow: boolean,
    voiDetail: VoiDetail,
    isDialog: boolean,
} = reactive({
    isShow: false,
    voiDetail: {
        title: '',
        voiPoints: [],
    },
    isDialog: false,
})
export default defineComponent({
    name: 'Vmap',
    data() {
        return {
            voiceSrc: '',
            walkingMsg: '',
        };
    },
    mounted() {
    },
    methods: {
        playVoice(msg: string) {
            if (msg === "") {
                msg = "目的地已到达，导航结束"
                this.walkingMsg = "";
            }
            this.voiceSrc = "https://shlib-api.zenosh.com/api/voice?modelType=1018&text=" + encodeURIComponent(msg);

            const audio: any = document.getElementById("mp3Btn");
            if (audio) {
                audio.load();
                setTimeout(() => {
                    // @ts-ignore
                    if (window.WeixinJSBridge) {
                        // @ts-ignore
                        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                            audio.play();
                        }, false);
                    } else {
                        document.addEventListener("WeixinJSBridgeReady", function () {
                            // @ts-ignore
                            WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
                                audio.play();
                            });
                        }, false);
                    }
                    audio.play();
                }, 500);
            }
        }
    },
    render() {
        return <Fragment>
            <div>
                <div id="mapContainer" style={{ width: '100vw', height: '100vh', position: 'absolute', top: '0' }}></div>
                <audio src={this.voiceSrc} id="mp3Btn" style="display: none" />
            </div>
        </Fragment>;
    },
});